<template>
  <div>
    <!-- 代办通知 -->
    <orhon-Card
      class="Card"
      :title="$language(item.title)"
      :extra="item.extra"
      :icon="item.icon"
      :iconSetting="item.iconSetting"
      @Change="Change"
      :loading="loading"
      has="'mycard'"
    >
      <template v-slot:content>
        <ul class="Ul">
          <li v-for="(val,index) in List" :key="index" @click="Jump(val)">
            <div>
              <icon-font :type="val.icon" :style="{fontSize:val.fontSize+'px',color:val.color}" />
              <div class="Text">{{$language(val.title)}}</div>
            </div>
          </li>
        </ul>
      </template>
    </orhon-Card>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop } from "vue-property-decorator";
import OrhonCard from "../Card.vue";
import { getMyBusiness } from "~/logicLib/myBusiness";
import { Result, Mybusiness } from "~/models/HomePage";
import { namespace } from "vuex-class";

const sessionStorage = namespace("sessionStorage");
const BusinessRoutes = namespace("myBusiness");
@Component({
  components: {
    OrhonCard
  }
})
export default class OrhonSilder extends Vue {
  @sessionStorage.Mutation("setItemRoute") sessionStorage;
  @BusinessRoutes.Mutation("BusinessRoutes") setBusinessRoutes;
  @BusinessRoutes.Mutation("setRouteskey") setRouteskey;
  loading: boolean = true;
  //卡片配置数据
  item: Object = {
    title: "我的业务",
    icon: false, //是否是图标
    extra: "更多" //右侧标题 icon存在为图表，不存在为标题
  };
  //卡片数据列表
  List: Mybusiness[] = [];

  Change() {
    this.$message.success("展示更多数据");
  }

  Jump(val: Mybusiness) {
    if (val && val.routes.length > 0) {
      this.$router.push({
        name: val.routes[0].name
      });
      this.sessionStorage(val.routes);
    }
  }

  created() {
    const _this = this;
    getMyBusiness(_this, "").then((res: any) => {
      if (res.status === 0) {
        this.List = res.data;
        this.setBusinessRoutes(res.data);
        this.setRouteskey("");
        _this.loading = false;
      }
    });
  }
}
</script>;
<style lang="less" scoped>
.Ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  li {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style: none;
    width: 140px;
    height: 140px;
    text-align: center;

    &:hover {
      background-color: #009688;
      border-radius: 5px;
      box-shadow: 3px 3px 10px #009688;
      cursor: pointer;
      color: white;
    }
    color: #666666;

    .Image {
      width: 60px;
      height: 60px;
    }

    .Text {
      margin-top: 10px;
      font-size: 18px;
    }
  }
}

.Card {
  margin-top: 30px;
}
</style>
